<template>
  <div class="ClusterList">
    <div class="Cluster">
      <div class="Cluster_text">拼团</div>
      <img src="@/image/fanhui.png" @click="toBack" />
    </div>
    <div class="activity">
      <div class="Clusteractivity">
        <div class="Clusteractivity_text">拼团活动</div>
      </div>
      <!-- 列表 -->
      <div class="list" v-for="item in findList">
        <div class="left_img">
          <van-image width="110" height="110" fit="cover" :src="item.picUrlAll"/>
        </div>
        <div class="list_right">
          <div class="list_right_text">
            <h3>{{item.productName}}</h3>
            <!--<h4>{{item.descript}}</h4>-->
          </div>
          <div class="twop">2人拼</div>
          <div class="much">{{item.price}}</div>
          <div class="gq">{{item.averageCost}}</div>
          <div class="msp" @click="msp(item.productId)">马上拼</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import { GroupfindAllList,GroupfindAllById,GroupFindAddress } from "@/api/commodity/group";

  export default {
  name: "ClusterList",
    data(){
      return {
        findList:[],
      }
    },

  created(){
    var address = this.$route.query.carouselArea
    this.getList(address);
  },


  methods: {

    getList(address){
      // GroupfindAllList().then(res=>{
      //   this.findList = res.data;
      // })
      GroupFindAddress(address).then(res=>{
        this.findList = res.data;
      })
    },


    toBack() {
      this.$router.go(-1); //返回上一层
    },
    msp(productId) {
      this.$router.push({
        path: "/Cluster",
        query:{productId: productId}
      });
    }

  }
};
</script>

<style scoped>
.Cluster {
  width: 100%;
  height: 30px;
  /* background-color: pink; */
}
.Cluster img {
  width: 20px;
  height: 20px;
  margin-top: -25px;
}
.Cluster_text {
  line-height: 30px;
}
.activity {
  width: 100%;
  height: 531px;
  margin-top: 10px;
  /* background-color: powderblue; */
}
.Clusteractivity {
  width: 100%;
  height: 25px;
  /* background-color: purple; */
}
.Clusteractivity_text {
  float: left;
  margin-left: 20px;
  font-size: 18px;
  font-family: PingFangSC-bold;
  color: #333333 10000%;
}
.list {
  width: 320px;
  height: 109px;
  margin: auto;
  margin-top: 10px;
  display: flex;
  /* background-color: purple; */
}
.left_img img {
  width: 109px;
  height: 109px;
}
.list_right {
  width: 200px;
  height: 109px;
  margin-left: 10px;
  /* background-color: powderblue; */
}
.list_right_text {
  width: 180px;
  height: 40px;
  font-size: 14px;
  text-align: left;
  /* background-color: red; */
  color: rgba(51, 51, 51, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-bold;
}
.twop {
  width: 46px;
  height: 20px;
  border-radius: 20px;
  background-color: #888;
  margin-top: 25px;
  font-size: 12px;
  line-height: 20px;
}
.much {
  margin-top: 5px;
  float: left;
}
.gq {
  float: left;
  font-size: 12px;
  margin-top: 7px;
  margin-left: 10px;
  text-decoration: line-through;
}
.msp {
  left: 265px;
  top: 218px;
  width: 94px;
  height: 32px;
  line-height: 20px;
  border-radius: 8px;
  background-color: rgba(234, 109, 91, 100);
  text-align: center;
  float: right;
  margin-top: -10px;
  line-height: 32px;
}
</style>
